import {View, Text, ScrollView} from "@tarojs/components";
import React, { useCallback, useEffect,  useState} from "react";
import { InvoiceModel,} from "@/common/apis/model";
import {
  invoiceDeleteApi,
  invoiceListApi,
  invoiceUpdateApi
} from "@/common/apis/home_datasource";
import LogUtils from "@/utils/log";
import Utils from "@/utils/common";
import {Button, Cell, Empty} from "@antmjs/vantui";
import AssetImage from "@/common/AssetImage";
import TextIcon from "@/components/TextIcon";
import CommonCssUtils from "@/common/CommonCssUtils";
import RouthPath from "@/common/RouthPath";
import BottomButton from "@/components/bottom_button";
import Taro from "@tarojs/taro";


definePageConfig({
  navigationBarTitleText: '发票列表'
})
export default function FaPiaoList() {
  const [items, setItems] = useState<InvoiceModel[]>()

  const getList = useCallback(() => {
    invoiceListApi().then((res) => {
      setItems(res)
    })
  }, []);

  useEffect(() => {
    getList();
    return () => {
    }
  }, [getList]);

  const onChangeDefault = useCallback((item) => {
    if (item.isDefault === 1) return
    invoiceUpdateApi({
      id: `${item.id}`,
      isDefault: '1'
    }).then((res) => {
      if (res) {
        getList();
      }
    })
  }, [getList]);

  const onClickItem = useCallback((item) => {
    const url = Utils.getUrlWithObject(RouthPath.addFapiao, item)
    LogUtils.info('url', url)
    Utils.navigateAndListenToEvent(url, 'invoiceAdded', (data) => {
      if (data) {
        getList();
      }
    })
  }, [getList]);


  const onDeleteItem = useCallback((item) => {
    Utils.modal('提示', '确定删除吗？', true, (isOK) => {
      if (isOK) {
        invoiceDeleteApi(item.id).then((res) => {
          if (res) {
            Utils.showOkToast('删除成功')
            getList();
          }
        })
      }
    })
  }, [getList]);
  return (
    <View style={{display: 'flex', flexDirection: 'column', height: '100VH', backgroundColor: '#fff'}}>
      <View style={{flex: 1, overflow: 'hidden', position: 'relative'}}>
        <ScrollView style={{height: '100%', boxSizing: 'border-box'}} scrollY>
          {items && !Utils.isEmpty(items) ? items.map((e, i) => {
            return <FaPiaoItem item={e} isDefault={e.isDefault === 1} onChangeDefault={onChangeDefault}
                               onDeleteItem={onDeleteItem} key={e.id}
                               onClickItem={onClickItem}
            />
          }) : <Empty description='暂无数据'/>}
        </ScrollView>
      </View>
      <BottomButton submitText='新增发票' onSubmit={() => {
        Utils.navigateAndListenToEvent(RouthPath.addFapiao, 'invoiceAdded', (data) => {
          if (data) {
            getList();
          }
        })
      }}
      />
    </View>
  )
}


function FaPiaoItem(pros) {

  const item = pros.item
  const isDefault = pros.isDefault

  return (
    <View style={{margin: '10px'}}>
      <Cell
        style={{backgroundColor: AssetImage.themeColor, borderRadius: '10px'}}
        renderTitle={
          <View style={{display: 'flex', flexDirection: 'column'}}>
            <TextIcon
              iconName='location-o'
              text={item.title}
              iconPosition='left'
              iconColor='white'
              textColor='white'
            />
            <Text style={{color: 'white'}}>企业税号:{item.no}</Text>
            <View style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
              <TextIcon
                iconName='checked'
                text='设置默认'
                iconPosition='right'
                onClick={() => {
                  pros.onChangeDefault(item)
                }}
                iconColor={isDefault ? 'green' : '#fff'}
                textColor='white'
                iconSize='24px'
              />
              <View
                style={{display: 'flex', flexDirection: 'row'}}
              ><Button size='small' style={
                {
                  color: AssetImage.themeColor,
                  backgroundColor: '#fff',
                }
              }
                       onClick={() => {
                         pros.onClickItem(item)
                       }}
              >编辑</Button>
                <Button size='small'
                        style={CommonCssUtils.getButtonStyle()}
                        onClick={() => {
                          pros.onDeleteItem(item)
                        }}
                >删除</Button>
              </View>
            </View>
          </View>
        }

      />
    </View>
  )
}


